<template>
  <div>
    <van-dialog
      v-model="visible"
      title="审批情况查看"
      show-cancel-button
      :showConfirmButton="false"
      @cancel="handleClose"
      cancel-button-text="关闭"
    >
      <div class="auditbox">
        <div class="followInfo" v-if="dataList && dataList.length != 0">
          <div
            class="followInfo_item flex"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <div class="followInfo_lt">
              <i class="iconfont icon-circle"></i>
            </div>

            <div class="followInfo_rt">
              <div class="followInfo_num flex">
                <span class="followInfo_txt">
                  {{ item.acdefName ? item.acdefName : '-' }}
                </span>
                <span class="followInfo_state">{{ item.state }}</span>
              </div>
              <div class="followInfo_data">
                开始时间：{{ item.createtTime ? item.createtTime : '-' }}
              </div>
              <div class="followInfo_data">
                结束时间：{{ item.compTime ? item.compTime : '-' }}
              </div>
              <div class="followInfo_data">
                审批人：{{ item.personName ? item.personName : '-' }}
              </div>
              <div class="followInfo_data">
                审批意见：{{ item.opinion ? item.opinion : '-' }}
              </div>
              <div class="followInfo_data">
                审批结果：{{ item.isPass ? item.isPass : '-' }}
              </div>
            </div>
          </div>
        </div>
        <van-empty class="noContent martop" description="暂无数据" v-else />
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import sellManageApi from '@/api/sellManageApi'

export default {
  name: 'auditRecord',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    billId: {
      type: String,
      default: null,
    },
  },
  components: {
    Dialog,
  },
  data() {
    return {
      dataList: [
        // {
        //   acdefName: '测试', //任务名称
        //   state: '审核', //状态
        //   personName: '章三', //审批人员
        //   isPass: '拒绝', //审批结果
        //   opinion: '哈哈哈哈', //审批意见
        //   auditTime: '2023-12-10 14:00:00', //审核时间
        //   createtTime: '2023-12-11 13:00:00', //创建时间
        //   compTime: '2023-12-12 15:00:00', //完成时间
        // },
      ],
    }
  },
  watch: {
    visible: {
      handler: function (val, oldVal) {
        if (val) {
          this.getDetail(this.billId)
        }
      },
      deep: true,
      immediate: false,
    },
  },

  methods: {
    getDetail(billId) {
      sellManageApi
        .secondHandCarFacade({
          billId,
          method: 'getApproveResult',
        })
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            this.dataList = res.data
          } else {
            this.handleClose()
          }
        })
    },

    handleClose() {
      this.$emit('close')
    },
  },
}
</script>

<style lang="less" scoped>
// 跟进信息
.auditbox {
  max-height: 65vh;
  overflow: auto;
}
.followInfo {
  padding: 0.2rem;
  background: #fff;
  .followInfo_item {
    margin-bottom: 0.2rem;
    position: relative;
    .followInfo_lt {
      width: 20%;
      .followInfo_time {
        font-size: 0.26rem;
        color: #999;
        position: absolute;
        top: 3px;
        left: -21px;
        width: 100px;
        text-align: center;
      }
      &::before {
        content: '';
        height: 160px;
        width: 1px;
        background: #ccc;
        position: absolute;
        top: 0px;
        left: 0.6rem;
      }
      .icon-circle {
        color: #ccc;
        z-index: 2;
        position: absolute;
        top: 0px;
        left: 0.42rem;
        background: #fff;
      }
    }
    .followInfo_rt {
      background: #f6f6f6;
      width: 100%;
      padding: 0.3rem 0 0.3rem 0.3rem;
      border-radius: 4px;

      .followInfo_num {
        font-size: 0.26rem;
        color: #333;
        margin-bottom: 0.1rem;
        margin-bottom: 0.2rem;
        font-weight: bold;
        border: 1px solid #04bd98;
        border-radius: 5px;
        width: 200px;
        align-items: center;

        .followInfo_txt {
          background: #04bd98;
          color: #fff;
          padding: 5px;
          width: 150px;
          text-align: center;
          margin-right: 5px;
        }
        .followInfo_state {
          width: 50px;
          color: #04bd98;
          text-align: center;
        }
      }
      .followInfo_data {
        font-size: 0.26rem;
        color: #666;
        margin-bottom: 0.1rem;
        .followInfo_img {
          width: 0.8rem;
          height: 0.8rem;
          margin-right: 0.1rem;
        }
      }
    }
  }
}
.noContent {
  margin-top: 2rem;
}
.martop {
  margin-top: 0rem !important;
}
</style>
